import React,{ useCallback, useState } from 'react';


let Child = (props)=>{
  console.log('Child组件被执行了');
  return (<div>
    Child
    <button onClick={()=>{
      props.changeName('诶嘿')
    }}>点击调用 changeName</button>
  </div>)
}

Child = React.memo(Child)

const App = () => {

  const [count,setCount] = useState(100)

  // 1. 父组件定义修改函数

  let changeName = (val)=>{
    console.log(val);
  }
  /*
    useCallback 可以接收两个参数，会有一个返回值
    参数一：是一个函数，就是我们需要缓存的函数
    参数二：是一个依赖项，如果没有配置任何依赖项，那么该函
    数就不会再次被执行，配置了依赖项，当依赖发生变化的时候才会被执行

    useCallback 将使用到的函数进行包裹即可，useCallback 操作的是函数，缓存的是函数
  */
  changeName = useCallback(changeName, [])

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={()=>{
        setCount(count + 1)
      }}>加 1</button>

      <hr />

      <Child changeName={changeName} />
    </div>
  );
};

export default App;
